<script setup lang="ts">
import { onMounted, onUnmounted, ref, provide } from 'vue';
import 'element-plus/theme-chalk/display.css';

import HeaderView from "@/views/PC/HeaderView.vue";
import ContentView from "@/views/PC/ContentView.vue";
import FooterView from "@/views/PC/FooterView.vue";
import WapHeaderView from "@/views/Wap/WapHeaderView.vue";
import WapContentView from "@/views/Wap/WapContentView.vue";
import WapFooterView from "@/views/Wap/WapFooterView.vue";

// 顶部广告图片
const topImage = '/img/top.png';

// 监听窗口大小
const windowWidth = ref(window.innerWidth);
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};
onMounted(() => {
  window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
// provide 设置全局常量 state
provide('state', 1);


</script>

<template>
  <!-- PC端 -->
  <template v-if="windowWidth > 768">
    <el-affix :offset="0" >
      <el-image :src="topImage" style="width: 100%" ></el-image>
    </el-affix>
    <div style="width: var(--max-width)">
      <el-container>
        <el-header class="padding-0"><HeaderView /></el-header>
        <el-main class="padding-0 view-content"><ContentView /></el-main>
        <el-footer class="padding-0"><FooterView /></el-footer>
      </el-container>
    </div>
  </template>

  <!-- WAP端 -->
  <template v-else>
    <div style="width: 100%">
    <el-container>
      <el-header class="padding-0"><WapHeaderView /></el-header>
      <el-main class="view-content padding-0"><WapContentView /></el-main>
      <el-footer class="padding-0"><WapFooterView /></el-footer>
    </el-container>
    </div>
  </template>

  <!-- 返回顶部 -->
  <el-backtop :bottom="100"></el-backtop>

</template>

<style scoped>
.el-header {
  height: fit-content;
}
.padding-0 {
  padding: 0;
}
.view-content {
  min-height: 80vh;
}
.el-footer {
  height: fit-content;
}
</style>
